<template>
    <AdminSkeleton>
        <template #header>
            <div class="params-form">
                <el-form :model="jobParamsForm" label-width="auto" style="max-width: 600px">
                    <el-form-item label="状态">
                        <el-select
                            v-model="jobParamsForm.status"
                            placeholder="Select"
                            size="small"
                            style="width:100px"
                        >
                        <el-option
                            v-for="item in statusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                        </el-select>
                    </el-form-item >                        
                    <el-form-item label="描述">
                        <el-input v-model="jobParamsForm.desc" placeholder="描述" size="small"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="getJoBInfo(jobParamsForm)">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </template>
        <template #control>
            <el-button type="success" size="small" title="新增" @click="editJob('add',{})">
                <el-icon size="18"><DocumentAdd /></el-icon>
            </el-button>
        </template>
        <template #content>
            <el-table :data="jobTable" style="width: 100%"
                v-loading="tableLoading"
                size="small"                
            >
                <el-table-column fixed prop="JOBID" label="ID" width="70" />
                <el-table-column fixed prop="DESCRIPTION" label="描述" width="200" />
                <el-table-column prop="STATUS" label="状态">
                    <template #default="{row}">
                        <div class="status-box" :class="{noActive:row.STATUS === '不活动'}">
                            {{ row.STATUS }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="B_TYPE" label="大类" />
                <el-table-column prop="S_TYPE" label="小类" />
                <el-table-column prop="LEADTIME" label="提前天数"/>
                <el-table-column prop="NEXTDATE" label="下次日期" width="120">
                    <template #default="{row}">
                        {{ dateFormat(row.NEXTDATE) }}
                    </template>
                </el-table-column>
                <el-table-column prop="FREQUENCY" label="频率"/>
                <el-table-column prop="FREQUNIT" label="频率单位"/>
                <el-table-column prop="REMARK" label="备注" width="200"/>
                <el-table-column prop="W_STATUS" label="起始状态">
                    <template #default="{row}">
                        <div class="status-box" :class="[{fin:row.W_STATUS === '完成'},{away:row.W_STATUS === '持续'}]">
                            {{ row.W_STATUS }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="LASTDATE" label="上次日期" width="120">
                    <template #default="{row}">
                        {{ dateFormat(row.LASTDATE) }}
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" min-width="120">
                    <template #default="{row}">
                        <el-button type="primary" size="small" title="编辑" @click="editJob('update',row)">
                            <el-icon><Edit /></el-icon>
                        </el-button>
                        <el-button  type="warning" size="small" title="复制" @click="editJob('copy',row)">
                            <el-icon><CopyDocument /></el-icon>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </AdminSkeleton>
    <Drawer ref="drawerRef" :title="title" :size="size" 
        @cancel-submit="resetForm"
        @submit="editSubmit(submitType,editForm)"
    >
        <el-form :model="editForm"  
            ref="updateFormRef"
            :rules="rules"
        >
            <el-form-item label="JOBID" :label-width="formLabelWidth">
                <el-input v-model="editForm.JOBID" autocomplete="off" disabled/>
            </el-form-item>
            <el-form-item label="描述" :label-width="formLabelWidth" rop="DESCRIPTION">
                <el-input v-model="editForm.DESCRIPTION" autocomplete="off" type="textarea"/>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth" prop="STATUS">
                <el-select
                    v-model="editForm.STATUS"
                    placeholder="状态"
                >
                    <el-option v-for="item in statusOptions" :label="item.label" :value="item.value" />
                </el-select>  
            </el-form-item>
            <el-form-item label="大类" :label-width="formLabelWidth" prop="B_TYPE">
                <el-select
                    v-model="editForm.B_TYPE"
                    placeholder="请选择大类"
                    @change="btSelectChange"
                >
                    <el-option v-for="item in workType" :label="item.label" :value="item.label" />
                </el-select>
            </el-form-item>
            <el-form-item label="小类" :label-width="formLabelWidth" prop="S_TYPE">
                <el-select
                    v-model="editForm.S_TYPE"
                    placeholder="请选择小类"                    
                >
                    <el-option v-for="item in sTypeArr" :label="item.label" :value="item.label" />
                </el-select>
            </el-form-item>
            <el-form-item label="提前天数" :label-width="formLabelWidth">
                <el-input v-model="editForm.LEADTIME" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="下次日期" :label-width="formLabelWidth" prop="NEXTDATE">
                <el-date-picker
                    v-model="editForm.NEXTDATE"
                    type="date"
                    placeholder="请选择日期"
                    format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD"
                />
            </el-form-item>
            <el-form-item label="频率" :label-width="formLabelWidth" prop="FREQUENCY">
                <el-input v-model="editForm.FREQUENCY" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="频率单位" :label-width="formLabelWidth" prop="FREQUNIT">
                <el-select
                    v-model="editForm.FREQUNIT"
                    placeholder="请选择频率单位"                    
                >
                    <el-option label="天" value="天" />
                    <el-option label="月" value="月" />
                </el-select>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="editForm.REMARK" autocomplete="off" type="textarea"/>
            </el-form-item>
            <el-form-item label="初始状态" :label-width="formLabelWidth" prop="W_STATUS">
                <el-select
                    v-model="editForm.W_STATUS"
                    placeholder="初始状态"
                >
                    <el-option v-for="item in w_statusOptions" :label="item.label" :value="item.value" />
                </el-select>  
            </el-form-item>            
            <el-form-item label="上次日期" :label-width="formLabelWidth" disabled> 
                <el-date-picker
                    v-model="editForm.LASTDATE"
                    type="date"
                    placeholder="请选择日期"
                    format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD"
                />
            </el-form-item>             
      </el-form>
    </Drawer>
</template>

<script setup>
import {ref , reactive} from 'vue'
import AdminSkeleton from '@/components/AdminSkeleton.vue'
import Drawer from '@/components/Drawer.vue'
import {getJobInfo , handleJob} from '@/utils/worklogApi/job'
import { dateFormat } from '@/utils/dateFormat'
import { bsTypeToTree } from '@/utils/bsTypeToTree'
import { msgOpen } from '@/utils/msg'

//参数表单对象
let jobParamsForm = reactive({
    status:"",
    desc:""
})

//状态选项
let statusOptions = ref(
    [
        {label:"",value:""},
        {label:"活动",value:"活动"},
        {label:"不活动",value:"不活动"}
    ]
)

//job工作表
let jobTable = ref([])
let tableLoading = ref(false)
let workType = ref([])
let sTypeArr = ref([]) //用于大类选择后，获取相应的小类

//抽屉
let title = ref("")
let size = ref("50%")
let formLabelWidth = ref("120")

//编辑job信息
let drawerRef = ref(null) //组件ref
let editForm = reactive({
    JOBID:'',
    DESCRIPTION:'',
    STATUS:'',
    B_TYPE:'',
    S_TYPE:'',
    LEADTIME:'',
    NEXTDATE:'',
    FREQUENCY:'',
    FREQUNIT:'',
    REMARK:'',    
    W_STATUS:'',
    LASTDATE:''
})
let submitType = ref('')

//状态选项
let w_statusOptions = [
    {label:"",value:""},
    {label:"跟进",value:"跟进"},
    {label:"完成",value:"完成"},
    {label:"持续跟进",value:"持续跟进"},
]

//表单验证ref
let updateFormRef = ref(null)
//输入框验证规则
let rules = reactive({
    DESCRIPTION: [
        { required: true, message: '请输入描述', trigger: 'blur' },
    ],
    STATUS: [
        { required: true, message: '请选择状态', trigger: 'blur' },
    ],
    B_TYPE: [
        { required: true, message: '请选择大类', trigger: 'blur' },
    ],
    S_TYPE: [
        { required: true, message: '请选择小类', trigger: 'blur' },
    ],
    LEADTIME: [
        { required: true, message: '请填写提前天数', trigger: 'blur' },
    ],
    NEXTDATE: [
        { required: true, message: '请选择下次日期', trigger: 'blur' },
    ],
    FREQUENCY: [
        { required: true, message: '请填写频率', trigger: 'blur' },
    ],
    FREQUNIT: [
        { required: true, message: '请选择频率单位', trigger: 'blur' },
    ],
    W_STATUS: [
        { required: true, message: '请选择起始状态', trigger: 'blur' },
    ],
})

//重置表单
const resetForm = ()=>{
    editForm = reactive({
        JOBID:'',
        DESCRIPTION:'',
        STATUS:'',
        B_TYPE:'',
        S_TYPE:'',
        LEADTIME:'',
        NEXTDATE:'',
        FREQUENCY:'',
        FREQUNIT:'',
        REMARK:'',    
        W_STATUS:'',
        LASTDATE:''
    })
}

/**
 * 大类改变时小类来联动改变
 * @param {String} val select选择器选中的值 
 */
 const btSelectChange = (val)=>{
    // console.log(val);
    workType.value.filter(item=>{
        if(val === item.label) sTypeArr.value = item.children
    })
}

/**
 * 获取JOB
 * @param form 参数表单对象
 */
const getJoBInfo = async (form)=>{
    // console.log(form)    
    tableLoading.value = true
    let jobInfo = await getJobInfo(form)
    workType.value = bsTypeToTree(jobInfo.resDatas.workTypeInfo)
    jobTable.value = jobInfo.resDatas.jobInfo
    tableLoading.value = false
    msgOpen(jobInfo.msg,"success")  
}

/**
 * 处理job
 * @param {String} type 处理类型 
 * @param {Object} row 行对象
 */
const editJob = (type,row)=>{
    submitType.value = (type === "add" ||  type === "copy") ? "add" : type
    drawerRef.value.open()    
    if(type === 'update') {
        title.value = "编辑"
        editForm = row
        editForm.NEXTDATE = dateFormat(row.NEXTDATE)
        editForm.LASTDATE = dateFormat(row.LASTDATE)
    }
    if(type === 'add' || type === 'copy') {
        title.value = "新增"
        resetForm()
    } 
    if( type === 'copy') {
        editForm = JSON.parse(JSON.stringify(row))
        editForm.JOBID = "" 
        editForm.LASTDATE = "" 
    }  
}

/**
 * 处理用户方法
 * @param {Object} data 更新用户表单对象
 * @param {String} type 处理类型
 */
const editSubmit = async (type,data)=>{
    let newJob = await handleJob(type,data)
    // console.log(newWorklog)
    drawerRef.value.hideLoading()
    drawerRef.value.close()
    newJob.status ? msgOpen(newJob.msg,'success') : msgOpen(newJob.msg)
    getJoBInfo(jobParamsForm)
    resetForm()
}
</script>

<style lang="less" scoped>
.params-form{
    height: 100%;
    width: 100%;
    .el-form{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .el-form-item{
            margin-bottom: 0;
            margin-right: .3125rem;
        }
    }
    
}
.el-table{
    height: 95%;
    .status-box{
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: .1875rem;
    }
    .status-box.noActive{
        background-color: #ff4081;
    }
    .status-box.fin{
        background-color: #00e676;
    }
    .status-box.away{
        background-color: #03a9f4;
    }
}
</style>